<template>
  <div>
    <div v-if="activeData.table.rows">
      <el-divider>题目</el-divider>
      <draggable :animation="340" :list="activeData.table.rows" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.table.rows" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.label" placeholder="选项名" size="small" />
          <div class="close-btn select-line-icon" @click="activeData.table.rows.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px; margin-bottom: 10px">
        <el-button
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addSelectItem(activeData.table.rows)"
        >
          添加选项
        </el-button>
        <el-button
          icon="el-icon-document-copy"
          style="padding-bottom: 0"
          type="text"
          @click="openBatchEditDialogHandle('rows')"
        >
          批量编辑
        </el-button>
      </div>
    </div>
    <div v-if="activeData.table.columns">
      <el-divider>选项</el-divider>
      <draggable :animation="340" :list="activeData.table.columns" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.table.columns" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.label" placeholder="选项名" size="small" />
          <div class="close-btn select-line-icon" @click="activeData.table.columns.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px; margin-bottom: 10px">
        <el-button
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addSelectItem(activeData.table.columns)"
        >
          添加选项
        </el-button>
        <el-button
          icon="el-icon-document-copy"
          style="padding-bottom: 0"
          type="text"
          @click="openBatchEditDialogHandle('columns')"
        >
          批量编辑
        </el-button>
      </div>
    </div>
    <el-dialog title="批量编辑" :visible.sync="dialogVisible" width="30%">
      <span class="desc-text">每行对应一个选项</span>
      <el-input
        v-model="batchItemValue"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 5000 }"
        placeholder="选项1 选项2  选项3 "
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchEditSelectItems">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import _ from 'lodash'

export default {
  name: 'MatrixOption',
  components: {
    draggable
  },
  props: ['activeData'],
  data() {
    return {
      batchItemValue: '',
      batchDataKey: '',
      dialogVisible: false
    }
  },
  methods: {
    addSelectItem(data) {
      data.push({
        id: new Date().getTime(),
        label: ''
      })
    },
    openBatchEditDialogHandle(key) {
      this.batchDataKey = key
      let data = this.activeData.table[key]
      this.batchItemValue = _.join(
        data.map((item) => item.label),
        '\n'
      )
      this.dialogVisible = true
    },
    async batchEditSelectItems() {
      const arrStrs = this.batchItemValue
      const arr = arrStrs.split('\n')
      // 获取原来的下标 避免导致id变化
      let oldData = this.activeData.table[this.batchDataKey]
      let labels = oldData.map((item) => item.label)
      if (arr.length > 0) {
        const options = []
        for (let index = 0; index < arr.length; index++) {
          const element = arr[index]
          if (element.length > 0) {
            let oIndex = labels.indexOf(element)
            options.push({
              id: oIndex > -1 ? oldData[oIndex].id : new Date().getTime() + index,
              label: element
            })
          }
        }
        this.$set(this.activeData.table, this.batchDataKey, options)
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  align-items: center;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

.option-drag {
  cursor: move;
}
</style>
